<template>
  <div>
    <van-nav-bar title="经营信息" fixed left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top">
      <van-form ref="subForm" class="mg-25 mt-20">
        <form-item item-name="营业执照">
          <van-field
            v-model="info.ShortName"
            name="商户简称"
            label="商户简称"
            placeholder="商户简称"
            :rules="[{ required: true, message: ' ' }]"
          />
          <van-field
            v-model="info.ServiceTel"
            name="客服电话"
            label="客服电话"
            placeholder="客服电话"
            :rules="[{ required: true, message: ' ' }]"
          />
        </form-item>
        <form-item item-name="线下门店" class="underline-shop">
          <van-field
            v-model="info.StoreName"
            name="门店名称"
            label="门店名称"
            placeholder="门店名称"
            :rules="[{ required: true, message: ' ' }]"
          />
          <van-field
            readonly
            clickable
            right-icon="arrow"
            name="area"
            :value="regionName"
            label="门店地址"
            placeholder="点击选择省市区"
            @click="showArea = true"
          />
          <van-popup v-model="showArea" position="bottom">
            <van-area
              :area-list="areaList"
              :columns-num="2"
              @confirm="onConfirm"
              @cancel="showArea = false"
            />
          </van-popup>
          <van-field
            v-model="info.Address"
            name="门店名称"
            label=" "
            placeholder="请输入详细地址"
            :rules="[{ required: true, message: ' ' }]"
          />
          <van-field
            name="uploader"
            label="门店门头照片"
            :rules="[{ required: true, message: '请上传门店门头照片' }]"
          >
            <template #input>
              <van-uploader
                v-model="storeImagesArr"
                max-count="1"
                :after-read="storeImagesAfterRead"
              />
            </template>
          </van-field>
          <p class="upload-text pb-20">门店招牌需清晰可见</p>
          <van-field
            name="uploader"
            label="店内环境照片"
            :rules="[{ required: true, message: '请上传店内环境照片' }]"
          >
            <template #input>
              <van-uploader
                v-model="indoorImagesArr"
                max-count="3"
                :after-read="indoorImagesAfterRead"
                @delete="deleteImagesAfterRead"
              />
            </template>
          </van-field>
          <p class="upload-text pb-20">上传门店内部环境照片</p>
        </form-item>
        <div class="btn-box pt-40 pb-60 flex-center">
          <van-button class="br-10 hollow-btn" type="info" @click="handleSubmit(0)">保存草稿</van-button>
          <van-button class="br-10 solid-btn" type="info" @click="handleSubmit(1)">保存并下一步</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import formItem from 'components/formItem'
import { AddMerchantSceneData, GetMerchantApplyData } from 'api/merchantPaper'
import { upLoad } from 'api/upload'
import areaList from 'utils/area'

export default {
  components: {
    formItem
  },
  data() {
    return {
      info: {
        AccountNo: '',
        ShortName: '',
        ServiceTel: '',
        StoreName: '',
        CityCode: '',
        Address: '',
        StoreImages: '',
        IndoorImages: ''
      },
      regionName: '',
      storeImagesArr: [],
      indoorImagesArr: [],
      tempImageArr: [], // 临时图片数组,用于多图上传/删除,存储/赋值
      showArea: false,
      areaList: areaList,
      accountNo: '',
      done: false
    }
  },

  created() {
    var accountNo = this.$route.query.accountNo
    if (accountNo) {
      this.accountNo = accountNo
      this.GetMerchantApplyData()
    } else {
      this.$toast({
        message: '保存信息前,需要先完成主体信息'
      })
    }
  },
  methods: {
    handleSubmit(val) {
      if (!this.done) {
        this.$toast.fail('请先完成主体信息')
        return false
      }
      if (this.accountNo) {
        this.$refs.subForm.validate().then(() => {
          this.info.AccountNo = this.accountNo
          AddMerchantSceneData(this.info).then(res => {
            if (res) {
              this.$toast.success('操作成功')
              if (val === 1) {
                // 下一步
                this.$router.push({
                  path: '/merchantPaper/settlementRules',
                  query: { accountNo: this.accountNo }
                })
              } else {
                this.$router.replace({
                  path: '/merchantPaper/',
                  query: { accountNo: this.accountNo }
                })
              }
            }
          })
        })
      } else {
        this.$toast.fail('商户编号是空的')
      }
    },
    // 获取信息
    GetMerchantApplyData() {
      GetMerchantApplyData({
        AccountNo: this.accountNo
      }).then(res => {
        if (res) {
          this.info = res.Data.Scene
          this.done = res.Data.InputMain
          if (this.info.StoreImages) {
            this.storeImagesArr = [
              {
                url: this.info.StoreImages
              }
            ]
          }
          if (this.info.IndoorImages != null) {
            this.indoorImagesArr = []
            this.info.IndoorImages.split('|').forEach(item => {
              this.indoorImagesArr.push({ url: item })
            })
            this.tempImageArr = this.indoorImagesArr
          }
          var cityCode = this.info.CityCode
          if (cityCode != null && cityCode != '' && cityCode.length == 6) {
            var cityId = parseInt(cityCode)
            var provinceId = cityCode.substr(0, 2) + '0000'
            this.regionName = this.areaList.province_list[provinceId] + '-' + this.areaList.city_list[cityId]
          }
        }
      })
    },
    onConfirm(value) {
      if (value) {
        this.regionName = value[0].name + '-' + value[1].name
        this.info.CityCode = value[1].code
      }
      this.showArea = false
    },
    // 门头上传回调
    storeImagesAfterRead(file) {
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            this.info.StoreImages = res.Data.FullPath
          } else {
            this.storeImagesArr = []
            this.$toast.fail('上传图片失败，请重新上传')
          }
        })
      }
    },
    // 店内照片上传回调
    indoorImagesAfterRead(file) {
      console.log(file)
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            this.tempImageArr.push({ url: res.Data.FullPath })
            this.indoorImagesArr = this.tempImageArr
            var urlArr = []
            this.indoorImagesArr.forEach(item => {
              if (item.url) {
                urlArr.push(item.url)
              }
            })
            this.info.IndoorImages = urlArr.join('|')
          } else {
            if (this.indoorImagesArr.length >= 1) {
              this.indoorImagesArr.pop()
            } else {
              this.indoorImagesArr = []
            }
            this.$toast.fail('上传图片失败，请重新上传')
          }
        })
      }
    },
    deleteImagesAfterRead(file) {
      var urlArr = []
      this.indoorImagesArr.forEach(item => {
        urlArr.push(item.url)
      })
      this.tempImageArr = this.indoorImagesArr
      this.info.IndoorImages = urlArr.join('|')
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-text {
  color: $colorC;
  font-size: 28px;
  background: $colorBg;
  padding-left: 264px;
  margin-top: -30px;
  z-index: 999;
  position: relative;
}

/* 线下门店表单特殊样式 */
.underline-shop {
  .van-cell:nth-child(3) {
    padding-bottom: 0;
    &::after {
      content: none;
    }
  }
  .van-cell:nth-child(4) {
    padding-top: 0;
  }
  .van-cell:nth-child(7) {
    &::before {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      top: 0;
      left: 16px;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
</style>
